@extends('layouts.admin')
@push('morecss')
    <link href="/vendor/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
@endpush

@push('morescript')
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxcardqrcode.index')
            url_list: '{{ route('admin.wxcardqrcode.index') }}',
            @endcan
                    @can('admin.wxcardqrcode.create')
            url_add: '{{ route('admin.wxcardqrcode.create') }}',
            @endcan
                    @can('admin.wxcardqrcode.update')
            url_edit: '{{ route('admin.wxcardqrcode.update') }}',
            @endcan
                    @can('admin.wxcardqrcode.destroy')
            url_del: '{{ route('admin.wxcardqrcode.destroy') }}',
            @endcan
                    @can('admin.wxcardqrcode.publish')
            url_publish: '{{ route('admin.wxcardqrcode.publish') }}',
            @endcan
            data_typelist: @json($typeList),
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxcardqrcode_index.js') }}"></script>
@endpush
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight ecommerce">
        <div class="ibox-content m-b-sm border-bottom">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="control-label" for="keyword">关键字</label>
                        <input type="text" id="keyword" name="keyword" v-model="searchParams.keyword"
                               placeholder="请输入搜索关键字"
                               class="form-control">
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <label class="control-label" for="product_name">&nbsp;&nbsp;</label>
                        <div>
                            <button class="btn btn-primary" type="button" v-on:click="query"><i
                                        class="fa fa-search"></i>
                                搜索
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="toolbar" class="col-sm-5" style="width: 300px;">
            @can('admin.wxcardqrcode.create')
                <button class="btn btn-primary" v-on:click="add"><i class="fa fa-plus"></i> 添加二维码</button>
            @endcan
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-content">
                        <table id="table" data-classes="table table-no-bordered">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 二维码编辑 -->
    <div class="ibox-content" id="box-qrcode" style="display: none">
        <form class="form-horizontal m-t" method="post" action="">
            <div class="form-group">
                <label class="col-sm-4 control-label">二维码名称 <span
                            style="color: red;">*</span></label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="qrcodeData.title">
                    <span class="help-block m-b-none">定义二维码名称方便查找和纪录</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-4 control-label">二维码类别：</label>
                <div class="input-group col-sm-6">
                    <select class="form-control m-b"
                            name="code_type"
                            v-model="qrcodeData.type">
                        <option v-for="item in qrcode_type_list" v-bind:value="item.type">
                            @{{ item.name }}
                        </option>
                    </select>
                </div>
            </div>
            <div v-show="qrcodeData.type == 'QR_CARD'">
                <div class="form-group">
                    <label class="col-sm-4 control-label">卡券ID <span
                                style="color: red;">*</span></label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" v-model="qrcodeData.card_info.card_id">
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">卡券Code码</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" v-model="qrcodeData.card_info.code">
                        <span class="help-block m-b-none">卡券为自定义code时必填，非自定义code和导入code模式的卡券不必填写</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">指定领取者的openId</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" v-model="qrcodeData.card_info.openid">
                        <span class="help-block m-b-none">只有该用户能领取。如果卡券创建时如果选择了“是否指定用户领取”则该字段必填，非指定openid不必填写</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">指定下发二维码</label>
                    <div class="col-sm-8">
                        <div class="radio radio-primary radio-inline">
                            <input type="radio" id="isUniqueCode1" value="1"
                                   name="isUniqueCode"
                                   v-model="qrcodeData.card_info.is_unique_code">
                            <label for="isUniqueCode1"> 是(领取后不可再次扫描) </label>
                        </div>
                        <div class="radio radio-primary radio-inline">
                            <input type="radio" id="isUniqueCode2"
                                   value="0" name="isUniqueCode"
                                   v-model="qrcodeData.card_info.is_unique_code">
                            <label for="isUniqueCode2"> 否 </label>
                        </div>
                        <span class="help-block m-b-none">生成的二维码随机分配一个code，领取后不可再次扫描。注意填写该字段时，卡券须通过审核且库存不为0。</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">领取场景值</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" v-model="qrcodeData.card_info.outer_str">
                        <span class="help-block m-b-none">用户首次领卡时，会通过 领取事件推送 给商户； 对于会员卡的二维码，用户每次扫码打开会员卡后点击任何url，会将该值拼入url中，方便开发者定位扫码来源</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">过期类别：</label>
                    <div class="input-group col-sm-8">
                        <div class="radio radio-primary radio-inline">
                            <input type="radio" id="expireType1" value="default"
                                   name="expire_type"
                                   v-model="qrcodeData.card_info.expire_type">
                            <label for="expireType1"> 默认(365天) </label>
                        </div>
                        <div class="radio radio-primary radio-inline">
                            <input type="radio" id="expireType2"
                                   value="seconds" name="expire_type"
                                   v-model="qrcodeData.card_info.expire_type">
                            <label for="expireType2"> 指定秒数 </label>
                        </div>
                        <span class="help-block m-b-none">指定二维码的有效时间，范围是60 ~ 1800秒。不填默认为365天有效</span>
                    </div>
                </div>
                <div class="form-group" v-show="qrcodeData.card_info.expire_type == 'seconds'">
                    <label class="col-sm-4 control-label">过期秒数</label>
                    <div class="col-sm-8">
                        <input type="number" class="form-control" min="60" max="1800" step="1"
                               v-model="qrcodeData.card_info.expire_seconds">
                    </div>
                </div>
            </div>
            <div v-show="qrcodeData.type == 'QR_MULTIPLE_CARD'">
                <div class="form-group">
                    <div class="col-sm-12">
                        <b> 字段说明：</b><br>
                        <b>卡券Code码:</b>卡券为自定义code时必填，非自定义code和导入code模式的卡券不必填写<br>
                        <b>领取场景值:</b>用户首次领卡时，会通过 领取事件推送 给商户； 对于会员卡的二维码，用户每次扫码打开会员卡后点击任何url，会将该值拼入url中，方便开发者定位扫码来源
                    </div>
                </div>
                <div class="form-group" v-show="qrcodeData.card_list.length < 5">
                    <label class="col-sm-4 control-label"></label>
                    <div class="col-sm-6">
                        <button type="button"
                                class="btn btn-default btn-sm"
                                v-on:click="addQrcode"><i
                                    class="fa fa-plus"></i> 新增卡券
                        </button>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group" v-for="(item, index) in qrcodeData.card_list">
                    <label class="col-sm-2 control-label">卡券@{{ index +1 }}</label>
                    <div class="form-group" style="margin-right: 0px;margin-left: 0px;">
                        <label class="col-sm-2 control-label">卡券ID<span
                                    style="color: red;">*</span></label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"
                                   v-model="item.card_id">
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label"></label>
                    <div class="form-group" style="margin-right: 0px;margin-left: 0px;">
                        <label class="col-sm-2 control-label">卡券Code码</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"
                                   v-model="item.code">
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label"></label>
                    <div class="form-group" style="margin-right: 0px;margin-left: 0px;">
                        <label class="col-sm-2 control-label">领取场景值</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"
                                   v-model="item.outer_str">
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label"></label>
                    <div class="form-group" v-show="qrcodeData.card_list.length > 1" style="margin-right: 0px;margin-left: 0px;">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <button type="button"
                                    v-on:click="delQrcode(index)"
                                    class="btn btn-default btn-sm">
                                <i class="fa fa-trash"></i>
                                删除卡券
                            </button>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-8">

                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-4">
                    <button class="btn btn-primary btn-sub" type="button" v-on:click="save">提交</button>
                </div>
            </div>
        </form>
    </div>
    <!--投放二维码查看-->
    <div class="ibox-content" id="box-qrcode-check" style="display: none">
        <div class="row">
            <div class="col-sm-12">
            <img :src="qrcodeData.qrcode_info.show_qrcode_url" class="img">
            </div>
        </div>
    </div>
@endsection